<template>
	<view>
		<view class="map">
			<view class="map-wrap">
				<map
					id="map"
					style="width: 100%; height: 100vh;" 
					:latitude="latitude" 
					:longitude="longitude"
					:markers="covers"
					:polyline="polyline"
					:include-points="covers"
					@markertap="handleChooseBusStation"
				>
				</map>
			</view>
			<view class="controls-title">
				<view class="address-wrap">
					<image class="location-icon" src="../static/imgs/icons/location.png"></image>
					<view class="txt">{{cityName}}</view>
				</view>
			</view>
			
			<view class="list">
				<view 
					class="item"
					v-for="(item, index) in searchAddressList"
					:key="index"
					@click="handleChooseAddress(item)"
				>
					<view class="tit">{{item.title}}</view>
					<view class="address">{{item.address}}</view>
				</view>
			</view>
			
			<view class="choosed_address-wrap">
				<view class="choosed_address">
					<text class="tip">当前位置：</text>
					{{curChoosedAddress.title || curChoosedAddress.address || curChoosedAddress.name || '定位中...'}}
				</view>
				<view class="btn" @click="handleConfirmChooseAddress">确定</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { BD09ToGCJ02 } from '../utils/gcoord.js'
	var QQMapWX = require('@/utils/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import $DB from '@/utils/debounce.js'
	export default {
		data() {
			return {
				travelsStatus: '', // to出发地选择 | form目的地选择
				title: 'map',
				latitude: 0,
				longitude: 0,
				searchText: '',
				searchAddressList: [],
				curChoosedAddress: {},
				covers: [], // 地图上的标记点
				polyline: [], // 地图山的标记点连线
				busInfo: {},
				cityName: '', // 坐车城市name
				driverList: [],
			}
		},
		onLoad(opt) {
			this.initMap();
			this.cityName = opt && opt.city
			this.travelsStatus = opt && opt.travelsStatus
			
		},
		onShow() {
			this.getCoversAndDrawLine()
			
		},
		methods: {
			getCoversAndDrawLine() { // 获取地图上的标记点
				let type = this.travelsStatus == 'to' ? 0 : 1
				let {schedulingId, lineId} = this.busInfo
				this.$http.get(this.$api.getCityStationList, {city: this.cityName}).then(res => {
					if (res.code === 200) {
						res.data.map(item => {
							let result = BD09ToGCJ02({latitude: item.lat-0, longitude: item.lng-0})
							item.lat = item.latitude = result[1]+''
							item.lng = item.longitude = result[0]+''
							item.iconPath = '/static/imgs/icons/bus1-icon.png'
							item.callout = {
								content: item.stationName || item.name,
								display: 'ALWAYS'
							}
						})
						console.log(res.data);
						this.covers = res.data
						this.getBusStation()
					}
				})
			},
			 initMap() {
				qqmapsdk = new QQMapWX({
					key: 'C7JBZ-VQD6D-BVZ4C-PHTJO-HNPSF-ORFT5'
				});
				this.getLocation();
				
			},
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					success: async function (res) {
						let {latitude, longitude} = res
						
						_this.latitude = latitude // 当前位置的纬度
						_this.longitude = longitude // 当前位置的经度
						// #ifdef MP-WEIXIN
						_this.reverseGeocoder(latitude, longitude)
						// #endif
						
						// #ifdef H5
						let data = await _this.exchangeDingwei(_this.latitude, _this.longitude)
						console.log(data);
						_this.curChoosedAddress = data.result
						// #endif
						// #ifdef H5
						return
						// #endif
						if (_this.travelsStatus==='to') { // 将当前定位
							_this.covers.push({
								id:1,
								latitude,
								longitude,
								iconPath: '/static/imgs/icons/to-icon.png',
								width: 18,
								height:34
							})
						} else if(_this.travelsStatus==='from') {
							_this.covers.push({
								id:1,
								latitude,
								longitude,
								iconPath: '/static/imgs/icons/from-icon.png',
								width: 18,
								height:34
							})
						}
					}
				});
			},
			reverseGeocoder(latitude, longitude) {
				let _this = this
				qqmapsdk.reverseGeocoder({
					location: {latitude,longitude},
					success: function (res) {
						_this.curChoosedAddress = res.result
					},
				});
			},
			handleChooseAddress(item) {
				this.curChoosedAddress = item
				
				let {lat,lng} = item.location
				this.latitude = lat
				this.longitude = lng
				
				this.searchText = ''
				this.searchAddressList = []
			},
			handleChooseBusStation(e) {
				let {markerId} = e.detail
				this.covers.forEach(item => {
					if (item.id==markerId) {
						// let {latitude, longitude} = item
						// this.reverseGeocoder(latitude, longitude)
						this.curChoosedAddress = item
						this.curChoosedAddress.title = item.stationName
						this.curChoosedAddress.address = item.stationName
						this.curChoosedAddress.addressName = item.address
					}
				})
			},
			handleConfirmChooseAddress() {
				if (this.latitude == (this.curChoosedAddress.location && this.curChoosedAddress.location.lat) ||  this.latitude == this.curChoosedAddress.lat) {
					return uni.showToast({title: '请选择租车点',icon: 'none'})
				}
				this.$store.commit('upChoosedRentCityStation', {[this.travelsStatus]: this.curChoosedAddress})
				uni.navigateBack({delta: 1})
			},
			getBusStation() {
				let mapCtx = uni.createMapContext("map",this)
				let padding = [100,0,100,0]
				let points = this.covers
				mapCtx.includePoints({points, padding})
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.map-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* #ifdef MP-WEIXIN */
	z-index: -1;
	/* #endif */
}
.controls-title {
	width:180rpx;
	height: 64rpx;
	margin: 18rpx 0 18rpx 30rpx;
	border-radius: 32rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	.address-wrap {
		font-size: 26rpx;
		display: flex;
		width: 152rpx;
		justify-content: space-evenly;
		color:$blue;
		.location-icon {
			width: 22rpx;
			height: 28rpx;
		}
	}
}
.list {
	display: flex;
	flex-direction: column;
	width: 690rpx;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 12rpx;
	.item {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		border-bottom: 1px solid #ebebeb;
		.tit {
			font-size: 32rpx;
		}
		.address {
			font-size: 26rpx;
			color: #999;
		}
	}
}
.choosed_address-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	// height: 98rpx;
	background-color: #fff;
	.choosed_address {
		font-size: 28rpx;
		flex: 1;
		padding-right: 20rpx;
		.tip {
			color:$yellow;
		}
	}
	.btn {
		font-size:32rpx;
		color: #fff;
		width:100rpx;
		text-align: center;
		height:72rpx;
		line-height: 72rpx;
		background:$yellow;
		border-radius:12rpx;
	}
}
</style>
